<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05元素样式操作</title>
		<!-- 元素样式操作：针对css样式的属性和属性值
		 css()             功能：添加任何样式下的属性和属性值
		                    1个参：获取匹配集合元素中第一个元素的css属性值
							2个参：设置匹配集合元素中所有元素的属性和属性值
							n个参：多层设置匹配集合元素中所有元素的属性和属性值
							语法糖：css({"属性":"属性值"})
							.btn{
								border: 1px solid red
							}
		 height()和width()	功能：匹配集合元素中第一个元素的高度和宽度值
		 							无参：获取匹配集合元素中第一个元素的高度和宽度值
		 							有参：设置匹配集合元素中第一个元素的高度和宽度值
		 outerHeight()和outerWidth()
		 							功能：元素的宽高度
		 							无参：获取元素宽高度，包含内边距+边框
		 							有参：只允许传bool值 true 外加一个外边距
		 -->
		 <style>
			 .box{
				 background-color: aqua;
				 padding: 20px;
				 margin: 20px;
				 border: 5px solid red;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: bold;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- .box添加样式属性：背景色，内外边距：20px 边框5px
		     .result添加样式属性：上外边距：10px 字体加粗：
			 jq框架引入																																																																																																														
		-->
		<!-- 显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn"> 获取背景颜色 </button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbpBtn">获取元素高度{包含 内边距加边距} </button>
		<button id="bpmBtn">实际高度</button>
		<!-- 显示效果提示区 -->
		<div id="result" class="result"></div>
		<script>
			/* 1，点击 获取背景颜色 按钮 获取背景颜色值 */
			$("#getColorBtn").click(function(){
				//jq css("属性名") 获取属性值
				var bgColor=$(".box").css("background-color");
				//显示区域--提示：获取的颜色属性值是？
				$("#result").text("获取背景颜色值是"+bgColor)
			});
			/* 2.点击 设置背景颜色 按钮 设置背景颜色值 */
			$("#setColorBtn").click(function(){
				// .box 添加 橙色
				$(".box").css("background-color","orange")
				$("#result").text("设置背景颜色值是橙色")
			});
			/* 3.点击 设置多层效果 按钮 设置效果如下：背景色 倒角 盒子阴影*/
			$("#setBtn").click(function(){
				$(".box").css({"background-color":"#e4393c",
				               "border-radius":"50%",
							   "box-shadow":"5px 5px 10px #ff0",
							   "width":"100px",
							   "height":"100px",
							   
				
				});
			});
			/* 4.点击 获取元素宽度 按钮 获取当前元素的宽高度*/
			$("#getWidthBtn").click(function(){
				var w=$(".box").width();
			    $("#result").text("获取的宽度为："+w+"px");
			});
			/* 5. */
			$("#gbpBtn").click(function(){
				var gbp=$(".box").outerHeight(true);
			    $("#result").text("获取的高度为："+gbp+"px");
			});
		    /* 6.点击获取元素高度 {} 按钮.. 传参bool*/
			$("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
			    $("#result").text("实际元素高度为："+bpm+"px");
			});
		</script>
	</body>
